<template>
  <div class="lfooter-box">
    <a-row type="flex" class="lfooter-box-one" v-if="routerlink === '/'">
      <a-col :span="9">
        <a-col :span="4">
          <img class="lfooter-icon" src="~/static/help_a715d11.png" alt srcset />
        </a-col>
        <a-col :span="20">
          <div class="lfooter-dt">{{t1}}</div>
          <div
            class="lfooter-dd"
            v-for="(item,index) in lists[0]"
            :key="index"
            @click="onFdd(item)"
          >{{item.title}}</div>
        </a-col>
      </a-col>
      <a-col :span="9">
        <a-col :span="4">
          <img class="lfooter-icon" src="~/static/pro_ae495e8.png" alt srcset />
        </a-col>
        <a-col :span="20">
          <div class="lfooter-dt">{{t2}}</div>
          <div
            class="lfooter-dd"
            v-for="(item,index) in lists[1]"
            :key="index"
            @click="onFdd(item)"
          >{{item.title}}</div>
        </a-col>
      </a-col>
      <a-col :span="6">
        <a-col :span="8" class="lfooter-rwm">
          <img :src="img1" alt srcset />
          <p>微信扫我</p>
        </a-col>
        <a-col :span="2"></a-col>
        <a-col :span="8" class="lfooter-rwm">
          <img :src="img2" alt srcset />
          <p>官方微博：双语游戏</p>
        </a-col>
      </a-col>
    </a-row>
    <a-row type="flex" justify="space-around" class="lfooter-box-tow">
      <a-col :span="10">
        {{ctext}}
        <!-- <span style="color:#0084ff">适龄提示：适合12岁以上使用</span> -->
      </a-col>
    </a-row>
  </div>
</template>
<script>
import { HELP_LIST, SHOW_HELP, GET_ERWEIMA } from "./server";
export default {
  data() {
    return {
      routerlink: this.$route.path,
      t1: "",
      t2: "",
      lists: [],
      img1: "",
      img2: "",
      ctext: ""
    };
  },
  created() {
    HELP_LIST({ type: "help", search: this.search }).then(res => {
      if (!res) return;
      this.t1 = res.data.list[0].title;
      this.t2 = res.data.list[1].title;
      this.getSh(res.data.list[0].cate_id);
      this.getSh(res.data.list[1].cate_id);
    });
    GET_ERWEIMA().then(res => {
      if (!res) return;
      this.img1 = res.data.erweima;
      this.img2 = res.data.erweima1;
      this.ctext = res.data.wenzi;
    });
  },
  methods: {
    getSh(id) {
      SHOW_HELP({
        id,
        type: "cate"
      }).then(res => {
        if (!res) return;
        this.lists.push(res.data);
      });
    },
    onFdd(item) {
      this.$router.push({
        path: "/consult/help/msg",
        query: { id: item.help_id, title: item.title, type: "help" }
      });
    }
  },
  watch: {
    $route(to, from) {
      this.routerlink = to.path;
    }
  }
};
</script>
<style lang="less" scoped>
.ant-layout-footer {
  background-color: #fff;
}

.lfooter-box {
  font-size: 12px;
  .lfooter-box-one {
    padding: 20px 0 40px 0;
    border-bottom: 2px solid #e8ecf0;
    .lfooter-icon {
      width: 32px;
      height: 32px;
    }

    .lfooter-dt {
      font-weight: 700;
      font-size: 17px;
      color: #616161;
    }
    .lfooter-dd {
      font-size: 12px;
      margin-top: 10px;
      cursor: pointer;
      &:hover {
        color: #0084ff;
      }
    }
  }
  .lfooter-rwm {
    img {
      width: 100%;
    }
    p {
      text-align: center;
    }
  }
}

.lfooter-box-tow {
  padding: 20px 0;
}
</style>
